<template>
    <div class="mine-container">
        <div class="header">历史记录</div>
        <Navbar></Navbar>
        <div class="main">

          <!-- 历史记录 -->
          <el-card class="box-card" v-for="(note,index) in noteList" :key="index">
              <el-image
                style="width: 10vw; height:10vw"
                :src="note.url"
                >
              </el-image>
              <div class="note-description">
                <h4>{{note. noteName}}</h4>
                 <span>创建时间：{{note.updateTime}}</span>
               </div>
          </el-card>
          <el-empty v-if="noteList === null " description="这里空空如也"></el-empty>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../home/footer.vue'
import Navbar from '@/components/home/navbar.vue'
import themeDemo1 from '@/assets/theme-demo/theme-demo1.png'
import themeDemo2 from '@/assets/theme-demo/theme-demo2.png'
import themeDemo3 from '@/assets/theme-demo/theme-demo3.png'
import themeDemo4 from '@/assets/theme-demo/theme-demo4.png'
import themeDemo5 from '@/assets/theme-demo/theme-demo5.png'
import themeDemo6 from '@/assets/theme-demo/theme-demo6.png'
import themeDemo7 from '@/assets/theme-demo/theme-demo7.png'
import themeDemo8 from '@/assets/theme-demo/theme-demo8.png'
import themeDemo9 from '@/assets/theme-demo/theme-demo9.png'
import themeDemo10 from '@/assets/theme-demo/theme-demo10.png'
export default {
  components: {
    Footer,
    Navbar,
    themeDemo1,
    themeDemo2,
    themeDemo3,
    themeDemo4,
    themeDemo5,
    themeDemo6,
    themeDemo7,
    themeDemo8,
    themeDemo9,
    themeDemo10
  },
  data () {
    return {
      noteList: [
        {
          noteName: '今日记事',
          updateTime: '20021-12-10',
          url: themeDemo1
        },
        {
          noteName: '假期安排',
          updateTime: '20021-12-10',
          url: themeDemo2
        },
        {
          noteName: '日历',
          updateTime: '20021-12-10',
          url: themeDemo3
        },
        {
          noteName: '美食分类',
          updateTime: '20021-12-10',
          url: themeDemo5
        },
        {
          noteName: '三餐记录',
          updateTime: '20021-12-10',
          url: themeDemo9
        },
        {
          noteName: '可爱账本',
          updateTime: '20021-12-10',
          url: themeDemo4
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.mine-container {
   .header {
     background-color: rgb(133, 183, 248);
      color: rgb(16, 79, 196);
      font-size: 2vw;
      text-align: center;
      height: 15vh;
      line-height: 15vh;
  }
   .main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2vh 10vw;
    background-color: #F5F7F9;
  }
  .box-card {
    text-align: center;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    width: 20vw;
    height: 20vw;
    margin: 1vw 0 0 1vw;
  }
}
</style>
